<template>
    <div>
        <el-container style="height: 850px; border: 1px solid #eee">
            <el-header style="font-size: 40px; background-color: rgb(70, 76, 91); display: flex; justify-content: flex-end; align-items: center">
                
                <div style="margin-left: auto; display: flex; align-items: center;">
                    <el-button style="background-color: #464c5b; border: none; color: white; font-size: 17px;" @click="handlePassword">
                        <i class="el-icon-info" style="margin-right: 5px;"></i>修改密码</el-button>
                    <el-button style="background-color: #464c5b; border: none; color: white; font-size: 17px;" @click.native="logout">
                        <i class="el-icon-remove" style="margin-right: 5px;"></i>退出登录</el-button>
                </div>
                
            </el-header>
            <el-container>
                <el-aside width="230px" style="border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '2', '3','4', '5']"  ref="menus" @close="handleClose">
                        
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-star-on"></i><router-link to="/firstPage"><span style="font-size: 18px">首页</span></router-link></template>
                        </el-submenu>

                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-user-solid"></i><span style="font-size: 18px">班级学员管理</span></template>
                            
                                <el-menu-item index="2-1">
                                    <router-link to="/class">班级管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="2-2">
                                    <router-link to="/stu">学员管理</router-link>
                                </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="3">
                            <template slot="title"><i class="el-icon-s-help"></i><span style="font-size: 18px">系统信息管理</span></template>
                            
                                <el-menu-item index="3-1">
                                    <router-link to="/dept">部门管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="3-2">
                                    <router-link to="/emp">员工管理</router-link>
                                </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="4">
                            <template slot="title"><i class="el-icon-menu"></i><span style="font-size: 18px">课程教务管理</span></template>
                            
                                <el-menu-item index="4-1">
                                    <router-link to="/course">课程管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="4-2">
                                    <router-link to="/course-manage">课程安排</router-link>
                                </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="5">
                            <template slot="title"><i class="el-icon-s-data"></i><span style="font-size: 18px">数据统计管理</span></template>
                            
                                <el-menu-item index="5-1">
                                    <router-link to="/emp-rep">员工信息统计</router-link>
                                </el-menu-item>
                                <el-menu-item index="5-2">
                                    <router-link to="/stu-rep">学员信息统计管理</router-link>
                                </el-menu-item>
                            
                        </el-submenu>
                    </el-menu>
                </el-aside>


                <el-main>
                    <!--修改密码对话框-->
                    <el-dialog ref="form" title="修改密码" :visible.sync="dialogPassWordVisible" width="30%">
                    <el-form ref="form" :model="theEmp" label-width="80px" size="mini">
                        <el-form-item label="用户名">
                            <el-input v-model="theEmp.username" placeholder="请输入用户名"></el-input>
                        </el-form-item>

                        <el-form-item label="新密码">
                            <el-input type="password" v-model="newPassword" placeholder="请输入新密码" show-password></el-input>
                        </el-form-item>

                        
                        <el-form-item>
                            <el-button type="primary" @click="updatePassword">提交</el-button>
                            <el-button @click="dialogPassWordVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                    </el-dialog>


                    <!--表单-->
                    <el-form :inline="true" :model="searchCourse" class="demo-form-inline">
                        <el-form-item label="课程名称">
                            <el-input
                            v-model="searchCourse.name"
                            placeholder="请输入课程名称"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="开课学年">
                            <el-select v-model="searchCourse.year" placeholder="请选择">
                            <el-option label="大一" value="1"></el-option>
                            <el-option label="大二" value="2"></el-option>
                            <el-option label="大三" value="3"></el-option>
                            <el-option label="大四" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="课程性质">
                            <el-select v-model="searchCourse.pro" placeholder="请选择">
                            <el-option label="必修" value="1"></el-option>
                            <el-option label="选修" value="2"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                            <el-button type="info" @click="clear">清空</el-button>
                        </el-form-item>
                    </el-form>

                    <!--按钮-->
                    <el-row>
                        <el-button type="danger" size="medium" @click="deleteByIds">- 批量删除</el-button>
                        <el-button type="primary" size="medium" @click="dialogVisible = true;" >+ 新增课程</el-button>
                    </el-row>

                    <br>

                    <!--添加数据对话框表单-->
                    <el-dialog ref="form" title="编辑课程" :visible.sync="dialogVisible" width="30%">
                    <el-form ref="form" :model="course" label-width="80px" size="mini">
                        <el-form-item label="课程名称">
                        <el-input v-model="course.name"></el-input>
                        </el-form-item>

                        <el-form-item label="开课学年" >
                        <el-select v-model="course.year" placeholder="请选择" style="width:100%" >
                            <el-option
                            v-for="item in yearList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.id"
                            />
                        </el-select>
                        </el-form-item>

                        <el-form-item label="开课学期" >
                        <el-select v-model="course.semester" placeholder="请选择" style="width:100%" >
                            <el-option
                            v-for="item in semesterList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.id"
                            />
                        </el-select>
                        </el-form-item>

                        <el-form-item label="课程性质" >
                        <el-select v-model="course.pro" placeholder="请选择" style="width:100%" >
                            <el-option
                            v-for="item in proList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.id"
                            />
                        </el-select>
                        </el-form-item>

                        <el-form-item label="课程学分">
                        <el-input v-model="course.score"></el-input>
                        </el-form-item>

                        <el-form-item label="课程时长">
                        <el-input v-model="course.duration"></el-input>
                        </el-form-item>

                        <el-form-item>
                        <el-button type="primary" @click="add">提交</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                    </el-dialog>

                    <br>

                    <!--表格-->
                    <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"  align="center"></el-table-column>
                        <el-table-column  prop="name"  label="课程名称"  align="center"></el-table-column>

                        <el-table-column align="center" label="开课学年">
                        <template slot-scope="scope">
                            <span style="margin-right: 10px" v-if="scope.row.year == 1">大一</span>
                            <span style="margin-right: 10px" v-if="scope.row.year == 2">大二</span>
                            <span style="margin-right: 10px" v-if="scope.row.year == 3">大三</span>
                            <span style="margin-right: 10px" v-if="scope.row.year == 4">大四</span>
                        </template>
                        </el-table-column>

                        <el-table-column align="center" label="开课学期">
                        <template slot-scope="scope">
                            <span style="margin-right: 10px" v-if="scope.row.semester == 1">秋季</span>
                            <span style="margin-right: 10px" v-if="scope.row.semester == 2">春季</span>
                        </template>
                        </el-table-column>

                        <el-table-column align="center" label="课程性质">
                        <template slot-scope="scope">
                            <span style="margin-right: 10px" v-if="scope.row.pro == 1">必修</span>
                            <span style="margin-right: 10px" v-if="scope.row.pro == 2">选修</span>
                        </template>
                        </el-table-column>

                        <el-table-column  prop="score"  label="学分"  align="center"></el-table-column>
                        <el-table-column  prop="duration"  label="总学时"  align="center"></el-table-column>

                        <el-table-column align="center" label="最后操作时间">
                        <template slot-scope="scope">
                            {{scope.row.updateTime ? scope.row.updateTime.replace('T',' '):''}}
                        </template>
                        </el-table-column>

                        <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="update(scope.row.id)">编辑</el-button>
                            <el-button type="danger" size="small" @click="deleteById(scope.row.id)">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>

                    <br>

                    <!--分页条-->
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :background="background"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
                    </el-pagination>


                </el-main>


            </el-container>
        </el-container>
    </div>
</template>

<script>
import { page, add, update, deleteById, selectById } from "@/api/course.js";
import { removeToken, getEmp} from '@/utils/auth'
import { updateEmp, selectByEmpId } from '@/api/emp'

export default {
    data() {
        return {
            theEmp: {},
            oldPassword: "",
            newPassword: "",
            dialogPassWordVisible: false,

            searchCourse: {
                name: "",
                year: "",
                pro: ""
            },

            yearList: [{id: 1,name: "大一"},{id: 2,name: "大二"},{id: 3,name: "大三"},{id: 4,name: "大四"}],
            semesterList: [{id: 1,name: "秋季"},{id: 2,name: "春季"}],
            proList: [{id: 1,name: "必修"},{id: 2,name: "选修"}],

            course: {
                
            },

            dialogVisible: false,

            // 每页显示的条数
            pageSize: 5,
            // 总记录数
            totalCount: 100,
            // 当前页码
            currentPage: 1,

            // 表格数据
            tableData: [],
            // 被选中的id数组
            selectedIds: [],
            // 复选框选中数据集合
            multipleSelection: [],
        }
    },
    methods: {
        // 查询分页数据
        page() {
            page(
                this.searchCourse.name,
                this.searchCourse.year,
                this.searchCourse.pro,
                this.currentPage,
                this.pageSize
            ).then((res) => {
                this.totalCount = res.data.data.total;
                this.tableData = res.data.data.rows;
            });
        },

        handleClose(key, keyPath) {
            this.$refs.menus.open(keyPath);
        },

        //分页
        handleSizeChange(val) {
            // 重新设置每页显示的条数
            this.pageSize = val;
            this.page();
        },

        handleCurrentChange(val) {
            // 重新设置当前页码
            this.currentPage = val;
            this.page();
        },

        //退出登录
        async logout() {
            removeToken();
            this.$router.push('/login')
        },

        //修改密码
        handlePassword() {
            this.oldPassword = this.theEmp.password;
            this.newPassword = '';
            this.dialogPassWordVisible = true;
        },

        updatePassword() {
            if (this.newPassword === this.oldPassword) {
                this.$message.error("新密码与旧密码一致, 重新输入!");
            } else {
                this.theEmp.password = this.newPassword;

                let operator;

                operator = updateEmp(this.theEmp);

                operator.then((resp) => {
                    if (resp.data.code == "1") {
                    this.dialogPassWordVisible = false;
                    //this.page();
                    this.$message({ message: "恭喜你，修改成功", type: "success" });
                    } else {
                    this.$message.error(resp.data.msg);
                    }
                });

            }
        },

        // 复选框选中后执行的方法
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        // 添加数据
        add() {
            let operator;

            if (this.course.id) {
                //修改
                operator = update(this.course);
            } else {
                operator = add(this.course);
            }

            operator.then((resp) => {
                if (resp.data.code == "1") {
                this.dialogVisible = false;
                this.page();
                this.$message({ message: "恭喜你，保存成功", type: "success" });
                this.course = { };
                } else {
                this.$message.error(resp.data.msg);
                }
            });
        },

        update(id) {
            //1. 打开窗口
            this.dialogVisible = true;
            //2. 发送请求

            selectById(id).then((result) => {
                if (result.data.code == 1) {
                    this.course = result.data.data;
                    this.course;
                }
            });
        },

        // 查询方法
        onSubmit() {
            this.currentPage = 1;
            this.page();
        },

        clear(){
            this.searchCourse = {name: "", year: "", pro: ""};
            this.page();
        },

        //删除课程信息
        deleteById(id){
            this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                //2. 发送AJAX请求
                deleteById(id).then((resp) => {
                    if (resp.data.code == 1) {
                    //删除成功
                    this.$message.success("恭喜你，删除成功");
                    this.page();
                    } else {
                    this.$message.error(resp.data.msg);
                    }
                });
            }).catch(() => {
                //用户点击取消按钮
                this.$message.info("已取消删除");
                });
        },

        // 批量删除课程信息
        deleteByIds() {
            // 弹出确认提示框
            this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                //用户点击确认按钮
                //1. 创建id数组, 从 this.multipleSelection 获取即可
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    this.selectedIds[i] = this.multipleSelection[i].id;
                }

                //2. 发送AJAX请求
                deleteById(this.selectedIds).then((resp) => {
                    if (resp.data.code == "1") {
                    //删除成功
                    this.$message.success("恭喜你，删除成功");
                    this.page();
                    } else {
                    this.$message.error(resp.data.msg);
                    }
                });
            }).catch(() => {
                //用户点击取消按钮
                this.$message.info("已取消删除");
                });
        },
    },
    mounted() {
        this.page(); //当页面加载完成后，发送异步请求，获取数据
        this.theEmp = JSON.parse(getEmp());
        selectByEmpId(this.theEmp.id).then((result) => {
                if (result.data.code == 1) {
                    this.theEmp = result.data.data;
                    this.theEmp;
                }
        });
    }
}
</script>

<style>
.router-link-active {
  text-decoration: none;
  color: rgb(0, 110, 255);
}
a{
  text-decoration: none;
  color: black;
}
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
	display: none; 

}

.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
	display: none;

}
</style>